import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const toolkitCoounterSlice_string = 'toolkitCounterSlice';

// 异步获取数据
export const rtkCreateAsyncThunk = createAsyncThunk(
  toolkitCoounterSlice_string + '/rtkCreateAsyncThunk', // 命名空间
  async () => {
    // 数据
    const rsp = await fetch('/nestApi/wealth/getSummary', {
      method: 'post'
    }).then(res => res.json());
    if (rsp.code === 0) return rsp.data;
  }
);

// 创建slice：使用createSlice方法创建一个slice。每一个slice里面包含了reduce和actions，可以实现模块的封装。
export const toolkitCounterSlice = createSlice({
  // 命名空间，可以自动的把每一个action进行独立，解决了action的type出现同名的文件。在使用的时候默认会使用 name/actionName
  // 在调用action的时候会默认的设置为action的前缀
  name: 'toolkitCounterSlice',
  // name: toolkitCoounterSlice_string,
  // initialState：state数据的初始值
  initialState: {
    title: 'toolKit of countSlice',
    count: 1024,
    userList: []
  },
  // reducers：定义的action，由于内置了immutable插件，可以直接使用赋值的方法进行数据的改变，不需要每一次都返回一个新的state数据
  // 这里的属性会自动的导出为actions，在组件中可以直接通过dispatch进行触发
  reducers: {
    // 此处的类似于redux的reducer
    toolkitIncrement(state, action) {
      // console.log('toolKit state action', state, action)
      state.count = state.count + action.payload.step;
    },
    toolkitDecrement(state) {
      state.count -= 10;
    },
    toolkitAddUser(state, { payload }) {
      // state.userList = payload.userList
      state.userList.push(payload.userList);
    }
  },
  extraReducers: {
    // 初始化全部用户
    [rtkCreateAsyncThunk.pending.type]: state => {
      // pending
      // console.log('rtk pending state --->', state)
      const newUserList = state.userList;
      state.userList.push();
    },
    [rtkCreateAsyncThunk.fulfilled.type]: (state, action) => {
      // fulfilled
      const { payload } = action;
      const newData = payload.map(item => {
        return { [item.zsz]: item.drhz };
      });
      newData?.length && state.userList.push(...newData);
    },
    [rtkCreateAsyncThunk.rejected.type]: state => {
      // rejected
    }
  }
});

// 内置了thunk插件，可以直接处理异步请求
// *注意此处的 /nestApi 指代本地后台程序 localhost:3535/
export const toolkitAsyncGetUser = payload => {
  // console.log(123, 'payload', payload)
  return dispatch => {
    fetch('/nestApi/user/getUser')
      .then(res => res.json())
      .then(res => {
        // 直接使用改变值
        dispatch(
          toolkitAddUser({
            userList: res.data
          })
        );
      });
  };
};

// console.log('toolkitCounterSlice 中的值', toolkitCounterSlice)
// 导出 actions，此处action指向的就是reducers中的方法
export const { toolkitIncrement, toolkitDecrement, toolkitAddUser } = toolkitCounterSlice.actions;
// 导出reducer，在创建store的时候用到
export default toolkitCounterSlice.reducer;
